<style lang="less">

</style>
<template>
    <div class="page-invite">
        <div class="search-box">
            <input type="text" placeholder="搜索" @input="doInputInvite" @compositionstart="doCompositionstart" @compositionend="doCompositionend">
            <i class="icon-search"></i>
        </div>
        
        <div class="search-result-list">
            <Search :keyword="keyword"></Search>
        </div>
    </div>
</template>
<script>
    import Search from '../component/ys-searchList.vue'
    // import InviteMineDep from './inviteMineDep.vue'
    // import InviteOtherDep from './inviteOtherDep.vue'
    import bridge from '../bridge'
    export default {
        data(){
          return {
            starting: false,
            ending: false,
            timerId: null,
            keyword: ''
          }
        },
        activated(){
          this.initHeader();
        },
        methods:{
          initHeader() {
              bridge.client.configNavBar(function () {

              }, {centerItems:[{title:'邀请同事'}],rightItems:[]});
          },
          doCompositionstart(){
            this.starting = true;
            this.ending = false;
          },

          doCompositionend(e){
            const val = e.target.value;
            this.starting = false;
            this.ending = true;
            this.doUpdateInvite(val);
          },

          doInputInvite(e){
            const val = e.target.value;
            this.doUpdateInvite(val);
          },

          doUpdateInvite(val){
            if(this.ending || (!this.starting && !this.ending)){
              if(this.timerId){
                clearTimeout(this.timerId);
              }

              this.timerId = setTimeout(()=>{
                this.keyword = val;
              },400);
            }
          }
        },
        components:{
            Search
        }
    }
</script>

<style lang="less">
  .page-invite{
    .search-box{
      background: #fff;
      padding: 12px;
    }
    input {
      display: block;
      width: 100%;
      padding: 0 10px;
      box-sizing: border-box;
      font-size: 13px;
      height: 30px;
      line-height: 30px;
      border-radius: 15px;
      border: 0;
      outline: 0;
      background: #F7F7F7;
    }
    ::-moz-placeholder { color: #9E9E9E; }
    ::-webkit-input-placeholder { color:#9E9E9E; }
    :-ms-input-placeholder { color:#9E9E9E; }
  }
</style>
